<template>
  <div id="sign" style="position: relative">
    <div style="display: flex; background: #fff">
      <img
        :src="avter"
        alt=""
        style="
          border-radius: 25px;
          width: 40px;
          height: 40px;
          margin: 10px 5% 0px 5%;
        "
      />
      <p style="margin: 13px 0; display: flex; align-items: center">
        <b> {{ positionName }}</b>
      </p>
    </div>
    <!-- tab卡 -->
    <div
      style="width: 94%; margin: auto; padding: 8px 0 10px 0; background: #fff"
      ref="tabdiv"
    >
      <ul style="width: 100%; display: flex; flex-wrap: wrap" ref="tabul">
        <li
          style="width: 23%"
          v-for="(pic, index) in picturlist"
          @click="eventBtn && mixcli(index, pic.picturl)"
          ref="abstyTu"
          :style="index % 4 != 0 ? 'margin-left:2.6%;' : null"
          :class="index > 3 ? 'margn' : null"
          :key="index"
        >
          <div
            ref="sethei"
            :style="{
              background: `url(${pic.picturl}) no-repeat`,
              backgroundSize: '100% 100%',
              borderRadius: '11%',
            }"
            style="
              width: 100%;
              display: flex;
              flex-flow: column;
              align-items: center;
            "
          >
            <p
              style="width: 50%; margin: auto; height: 50%; text-align: center"
              v-show="active === index"
            >
              <img
                :src="choise"
                alt="样式图片"
                style="width: 100%; height: 100%"
              />
            </p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底层图片展示 -->
    <div ref="myswipe" class="my-swipe">
      <div class="myswipeBox" ref="movcan">
        <ul ref="moB" style="">
          <li
            class="fihei"
            ref="moBli"
            v-for="(pic, i) in picturlist"
            :key="i"
            @touchend="tabend($event)"
            @touchstart="tabstart($event)"
            @touchmove="tabmove($event)"
            style="height: 100%"
          >
            <img
              class="imgh"
              :src="pic.picturl"
              style="width: 100%"
              alt
              crossorigin="anonymous"
            />
          </li>
        </ul>
      </div>
    </div>
    <!-- 生成图片容器 -->
    <div
      class="container"
      style="width: 100%; position: absolute; left: 0; padding: 0 3%"
      :style="`top:${pto}px`"
    >
      <ul style="width: 100%; height: 100%; position: relative" class="ulhei">
        <li
          ref="putin"
          @touchend="tabend($event)"
          @touchstart="tabstart($event)"
          @touchmove="tabmove($event)"
          style="position: relative; width: 100%; height: 100%"
        >
          <div
            ref="sqr"
            style="
              width: 20%;
              height: 20%;
              position: absolute;
              bottom: -2%;
              right: 2%;
            "
          >
            <vue-qr
              :margin="5"
              :logoMargin="1"
              :text="qr_url"
              :size="500"
              style="width: 100%"
            ></vue-qr>
          </div>
          <img src="" alt="" style="width: 100%; height: 100%" ref="taim" />
          <ul
            style="
              width: 100%;
              height: auto;
              position: absolute;
              bottom: 1%;
              height: 18%;
              display: flex;
              flex-flow: column;
            "
          >
            <li
              style="
                width: 18%;
                margin-left: 4px;
                height: 65%;
                text-align: center;
              "
            >
              <img
                :src="userIcon == null ? logo_default : userIcon"
                alt=""
                style="width: 78%; height: 87%; border-radius: 50px"
              />
            </li>
            <li
              style="
                display: flex;
                flex-flow: column;
                margin-left: 15px;
                height: 35%;
              "
            >
              <div style="display: flex; padding-bottom: 5px">
                <p
                  style="
                    align-self: flex-end;
                    font-size: 12px;
                    margin-left: 6px;
                  "
                >
                  {{ daytime }}&nbsp;
                  <b style="font-size: 23px"> {{ sign_time }}</b>
                </p>
                <p
                  style="margin-left: 1%; align-self: flex-end; font-size: 12px"
                >
                  连续签到 &nbsp;
                  <span style="font-size: 23px; margin: 0 3px">
                    <b>{{ count }}</b>
                  </span>
                  &nbsp;天
                </p>
              </div>
              <!-- <div style="margin-top: 5px">
                比喷喷涂涂网{{ percent }}的用户起的早
              </div> -->
            </li>
          </ul>
        </li>
        <li
          style="
            width: 100%;
            margin: auto;
            position: fixed;
            top: -1px;
            z-index: 2;
          "
        >
          <p
            style="
              width: 60%;
              text-align: center;
              color: white;
              margin: auto;
              background: rgba(0, 0, 0, 0.5);
              border: 1px solid white;
              border-top: none;
            "
            class=""
            ref="found"
          ></p>
        </li>
      </ul>
    </div>

    <!-- tab -->

    <div class="tabRotation" v-if="false">
      <p
        style="
          font-size: 3vh;
          position: absolute;
          color: red;
          left: 15%;
          top: 27%;
          color: rgba(15, 15, 15, 0.2);
          z-index: 1;
        "
      ></p>

      <div class="mixRotation">
        <ul ref="maxp">
          <li
            v-for="(pic, index) in picturlist"
            @click="eventBtn && mixcli(index, pic.picturl)"
            ref="abstyTu"
            :key="index"
          >
            <div
              :style="{
                background: `url(${pic.picturl}) no-repeat`,
                backgroundSize: '100% 100%',
                borderRadius: '11%',
              }"
              style="
                width: 9vh;
                height: 9vh;
                display: flex;
                flex-flow: column;
                align-items: center;
              "
            >
              <p
                style="
                  width: 50%;
                  margin: auto;
                  height: 50%;
                  text-align: center;
                "
                v-show="active === index"
              >
                <img
                  :src="choise"
                  alt="样式图片"
                  style="width: 100%; height: 100%"
                />
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- daka -->

    <div style="text-align: center">
      <p style="color: #fe6b01; margin-top: 21px" v-if="statu != 0">
        今日已打卡
      </p>
      <p style="color: #fe6b01; margin-top: 21px" v-if="statu == 0">
        今日未打卡
      </p>
    </div>

    <div class="bigBox" style="padding-bottom: 10px; height: auto">
      <div style="width: 100%; display: flex; flex-flow: column">
        <p
          style="
            text-align: center;
            width: 25%;
            margin: auto;
            height: 62px;
            text-align: center;
            padding-top: 25px;
            font-size: 20px;
          "
          :style="{
            background: `url(${dataTop}) no-repeat`,
            backgroundSize: '100% 100%',
          }"
        >
          {{ count }}
          <span style="font-size: 14px; margin-left: 4px">天</span>
        </p>
        <p
          style="
            width: 100%;
            text-align: center;
            padding-bottom: 10px;
            margin-top: 10px;
          "
        >
          <span style="">幸福来自点滴的积累</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { Swipe, SwipeItem, Toast, Dialog } from 'vant';
import vueQr from 'vue-qr';
import backar from '@/assets/images/backar.jpg';
import logo_default from '@/assets/images/logo.jpg';
import mixmesage from '@/assets/images/mixmesge.png';
import dataTop from '@/assets/images/dataTop.png';

import xintu from '@/assets/images/xintu.png';
import cardRight from '@/assets/images/card_top_right.png';
import { signtive, signP, getWxConfig, authInfo } from '@/api/api';
import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
import html2Canvas from 'html2canvas';
import choise from '@/assets/images/choise.png';

export default {
  name: 'sign',
  data() {
    return {
      logo_default: logo_default,
      choise: choise,
      pantel: '',
      daytime: '',
      qr_url: '',
      avter: '',
      positionName: '',
      memberLevel: '',
      backar: backar,
      showtime: true,
      eventBtn: true,
      active: 0,
      cardRight: cardRight,
      xintu: xintu,
      showclass: false,
      maskShow: true,
      dataTop: dataTop,
      mixmesage: mixmesage,
      onback: false,
      moveSart: '',
      index: '',
      moveChange: '',
      // count: 1,
      userId: getLocalStorage('userId').userId,
      signData: '',
      userCount: '',
      sign_time: '',
      percent: '',
      pto: '',
      userIcon: getLocalStorage('avatar').avatar,
      count: '',
      picturlist: '',
      cot: '',
      abIn: '',
      arr: [],
      statu: '',
    };
  },

  watch: {},

  uodated() {},
  // 加载前
  mounted() {
    this.int();
  },
  // 加载中
  created() {
    setTimeout(() => {
      let fih;
      let ulei;
      let sethei = this.$refs.sethei;

      sethei.forEach((e) => {
        e.style.height = e.offsetWidth + 'px';
      });
      let myswipe = this.$refs.myswipe;
      this.pto = myswipe.offsetTop;
      fih = document.getElementsByClassName('my-swipe')[0];
      ulei = document.getElementsByClassName('ulhei')[0];
      if (fih != undefined && fih.offsetHeight != 0) {
        let container = document.querySelector('.container');
        container.style.height = fih.offsetHeight + 'px';
        ulei.style.height = fih.offsetHeight + 2 + 'px';
      } else {
        Toast('网络缓慢,可尝试刷新');
      }
    }, 400);
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth();
    let day = date.getDate();
    this.daytime = `${year}/${
      Number(month + 1) > 10 ? Number(month + 1) : '0' + Number(month + 1)
    }/${day > 10 ? day : '0' + day}`;
    this.signative();
    this.singpic();
    this.init();
  },

  methods: {
    tabstart(e) {
      let startX;
      startX = e;
    },
    tabmove(e) {
      let mobox = this.$refs.moB;
    },
    tabend(e) {
      let mobox = this.$refs.moB;
    },
    signative() {
      signtive({
        userId: Number(this.userId),
      })
        .then((res) => {
          this.pantel = res.data.data.tel;
          this.signData = res.data.data.image;
          this.userCount = res.data.data.userCount;
          this.sign_time = res.data.data.signTime;
          this.percent = res.data.data.percent;
          this.count = res.data.data.count;
        })
        .catch((err) => {
          console.log(err);
          if (err.data.errmsg == '未查询到该用户') {
            Dialog.confirm({
              title: '系统提示',
              message: '签到前请先登录',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
              .then(() => {
                this.$router.push({ path: '/check' });
              })
              .catch(() => {
                this.$router.push({ path: '/user/business/card' });
              });
          } else {
            Toast(err.data.errmsg);
          }
        });
    },
    singpic() {
      signP({ page: 1, limit: 20 }).then((res) => {
        this.picturlist = res.data.data.list;
      });
    },
    init() {
      authInfo().then((res) => {
        this.userId = res.data.data.userId;
        this.mobile = res.data.data.mobile;
        this.statu = res.data.data.status;
        this.positionName = res.data.data.positionName;
        this.memberLevel = res.data.data.memberLevel;
        this.avter = res.data.data.avatar;
        this.userLevel = res.data.data.userLevel;
        if (this.userLevel < 2) {
          if (this.memberLevel == 1) {
            this.positionName = '金牌会员';
          } else if (this.memberLevel == 2) {
            this.positionName = '普通会员';
          } else if (this.memberLevel == 0 && this.userLevel == 0) {
            this.positionName = '新用户';
          }
        }

        if (res.data.data.userLevel == 2) {
          this.qr_url =
            process.env.VUE_APP_BASE_API +
            'wechat/#/verify/user?userId=' +
            this.userId +
            '&shareId=' +
            this.userId;
        } else {
          this.qr_url =
            process.env.VUE_APP_BASE_API +
            'wechat/#/verify/user?userId=' +
            res.data.data.directorId +
            '&shareId=' +
            this.userId;
        }
        if (this.statu == 0) {
          //未认证
          Toast('请先验证手机号!');
          this.$router.push(`/check`);
          return;
        } else {
          //已认证
          setLocalStorage({
            userId: this.userId,
            mobile: this.mobile,
          });
        }
      });
    },

    mixcli(index, imge) {
      let fih;
      let ulei;
      fih = document.getElementsByClassName('my-swipe')[0];
      ulei = document.getElementsByClassName('ulhei')[0];
      if (fih != undefined && fih.offsetHeight != 0) {
        let container = document.querySelector('.container');
        container.style.height = fih.offsetHeight + 'px';
        ulei.style.height = fih.offsetHeight + 2 + 'px';
      }
      this.init();
      let moboxli = this.$refs.moBli;
      let taim = this.$refs.taim;
      taim.src = '';
      this.eventBtn = false;
      // let sqr = this.$refs.sqr;
      setTimeout(() => {
        this.showtime = true;

        taim.src = imge;
      }, 180);
      this.active = index;
      let canwith = document.body.clientWidth;
      let mobox = this.$refs.moB;
      let found = this.$refs.found;
      found.className = 'shartit';

      if (index != 0) {
        mobox.style.width = 2 * index * canwith + 'px';
      }
      moboxli.forEach((e) => {
        e.style.width = canwith + 'px';
      });
      mobox.style.transform = `translateX(${-index * canwith - 11}px)`;
      Toast(`第${this.active + 1}张分享图片`);

      this.int(this.active);
    },
    // 核心模块
    int(index) {
      let taim = this.$refs.taim;
      let found = this.$refs.found;
      let putin = this.$refs.putin;
      let sqr = this.$refs.sqr;
      found.innerHTML = '点选生成图片';
      sqr.style.opacity = 1;
      setTimeout(() => {
        this.eventBtn = true;
        if (index == undefined) {
          index = 0;
        }

        taim.src = this.picturlist[index].picturl;
        html2Canvas(putin, {
          useCORS: true, //解决跨域问题
          allowTaint: true, //允许跨域图片
        })
          .then((canvas) => {
            var context = canvas.getContext('2d');
            let saveUrl = canvas.toDataURL('image/png', 1);
            taim.src = saveUrl;
            sqr.style.opacity = 0;
            found.classList.remove('shartit');
            found.className = 'showartit';
            this.showtime = false;
            found.innerHTML = '---长按图片分享给好友---';
          })
          .catch((err) => {
            console.log(err);
          });
      }, 500);
    },
  },

  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Toast.name]: Toast,
    [vueQr.name]: vueQr,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.margn {
  margin-top: 10px;
}
.view-router {
  background: #fff;
}
.shartit {
  transition: 0.5s ease-out;
  transform: translateY(-21px);
}
.showartit {
  transition: 0.3s ease-out;
  transform: translateY(-1px);
}

.maskRight {
  width: 50%;
  height: 63vh;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: -13.5%;
  right: 0;
  z-index: 19;
}

// 模块一
// 开头轮播
.my-swipe {
  height: auto;
  width: auto;
  padding: 0 3%;
  // background: #1d1d1d;
}

.myswipeBox {
  width: auto;
  position: relative;
  color: #fff;
  overflow: hidden;
}
.myswipeBox img {
  float: left;
  height: 100%;
}
.myswipeBox ul {
  display: -webkit-box;
  overflow-x: hidden;
  flex-direction: row;
  width: auto;
  height: auto;
  transition: 0.5s ease-out;
}
.myswipeBox ul::-webkit-scrollbar {
  display: none !important;
  width: 0px;
  height: 0px;
}
.myswipeBox ul li {
  width: 100%;
  height: 100%;
}

.positi {
  left: 9%;
  top: -100%;
  position: relative;
  z-index: 52;
  width: 14%;
  height: 100%;
  background: rgba($color: #000000, $alpha: 0);
}
.positi ul {
  font-size: 3vh;
  width: 100%;
  height: 10vh;
  margin: auto;
  padding-top: 10.5rem;
}

// 小轮播
.tabRotation {
  bottom: 0%;
  position: relative;
  // border-bottom: 1px solid rgba(201, 201, 201, 0.262);
  width: 100%;
  height: auto;
  background: #ffffff;
  overflow: hidden;
}
.mixRotation ul {
  display: flex;

  padding: 2%;
  overflow: scroll;
  justify-content: space-between;
  list-style: none;
  width: 100%;
  height: auto;
  z-index: 2;
}
.mixslogan {
  background: #ffffff;
  padding: 1.5% 0;
  margin-top: 0.5%;
  width: 15%;
  height: auto;
  text-align: center;
  position: relative;
  z-index: 3;
  float: left;
}
.mixRotation {
  margin-top: 2%;
  width: 100%;
  height: auto;
  float: left;
  overflow: scroll;
}
.mixRotation::-webkit-scrollbar {
  display: none;
}
// .mixRotation ul li {
//   margin-left: 0.8rem;
// }
.mixRotation ul li img {
  position: relative;
  width: 9vh;
  height: 9vh;
  border-radius: 11%;
}

// 模块二

.bigBox {
  padding-top: 5px;
  margin: auto;
  width: 100%;
  height: auto;
}

// 日历表
.dataBox {
  margin-top: 7%;
  width: 100%;
  float: left;
}

.dataTitle {
  width: 80%;
  height: 4vh;
}
.dataTitle p:nth-child(1) {
  width: 50%;
  float: left;
  font-size: 2vh;
  color: rgba(15, 15, 15, 0.562);
}
.dataTitle p:nth-child(2) {
  font-size: 2vh;
  border: 1px solid rgba(15, 15, 15, 0.445);
  text-align: center;
  border-radius: 13px;
  margin-bottom: 1px;
  width: 20%;
  float: right;
  color: rgba(7, 7, 7, 0.945);
}
.dataShow {
  text-align: center;
  width: 16%;
  height: 6vh;
  position: absolute;
  left: 42%;
  top: 86%;
  z-index: 4;
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0px 10px 8px #888888;
}

.dataShow p:nth-child(1) {
  margin-top: 7%;
  font-size: 2.2vh;
  color: #070707f8;
  font-weight: bold;
}
</style>